<template>
  <div class="addHouse">
    <el-form :model="dataform" label-width="300px" ref="dataform" :rules="rules">
      <div class="title">基本信息</div>
      <el-divider></el-divider>
      <el-form-item label="酒店名称：" prop="hotel">
        <el-input v-model="dataform.hotel" placeholder="请输入酒店名称" style="width: 464px;" maxlength="16" show-word-limit />
      </el-form-item>
      <el-form-item label="联系电话：" prop="phone">
        <el-input v-model="dataform.phone" placeholder="请输入酒店的电话" style="width: 464px;" />
      </el-form-item>
      <p class="tishi">固定电话需加区号；区号、分机号均用"-"连接，不超过15个字符</p>
      <el-form-item label="地区：" prop="county">
        <el-select v-model="dataform.province" placeholder="请选择省" style="width: 110px;margin-right: 15px;">
          <el-option :label="item" :value="item" v-for="(item, index) in province" :key="index"></el-option>
        </el-select>
        <el-select v-model="dataform.city" placeholder="请选择市" style="width: 110px;margin-right: 15px;">
          <el-option :label="item" :value="item" v-for="(item, index) in city" :key="index"></el-option>
        </el-select>
        <el-select v-model="dataform.county" placeholder="请选择县" style="width: 110px;margin-right: 15px;">
          <el-option :label="item" :value="item" v-for="(item, index) in county" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input v-model="dataform.address" placeholder="请输入详细地址" style="width: 464px;" />
      </el-form-item>
      <p class="tishi">100个字符以内</p>
      <el-form-item label="位置坐标：">
        <el-input v-model="dataform.zuobiao" disabled style="width: 464px;" />
      </el-form-item>
      <el-form-item>
        <maps @jieshou="jieshouHandler"></maps>
      </el-form-item>
      <el-form-item label="酒店介绍：" prop="text">
        <el-input type="textarea" :rows="2" v-model="dataform.text" style="width: 464px;" />
      </el-form-item>
      <div class="title">配套服务</div>
      <el-divider></el-divider>
      <el-form-item label="酒店标签：" prop="tags">
        <el-tag :key="tag" v-for="tag in dataform.tags" closable :disable-transitions="false" @close="handleClose(tag)">
          {{ tag }}
        </el-tag>
        <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
          @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
      </el-form-item>
      <el-form-item label="客房设施：">
        <el-button color="#7399EB" plain style="width: 200px; " @click="addfwHandler">添加配套服务</el-button>
      </el-form-item>
      <el-form-item label="交通指引：" prop="help">
        <el-input v-model="dataform.help" type="textarea" maxlength="255" show-word-limit style="width: 464px;"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item label="酒店政策：" style="margin-bottom: 70px;" prop="rule">
        <el-input v-model="dataform.rule" type="textarea" maxlength="1000" show-word-limit style="width: 464px;"
          placeholder="请输入" />
      </el-form-item>
      <peitaofwDialog v-model="dialogVisible" :dialogVisible="dialogVisible" @dialogCancel="dialogCancelHandler"
        @dialogOk="dialogOKHandler" />
      <querenQuxiao @okHandler="submitHandler" @cancelHandler="cancelHandler"></querenQuxiao>
    </el-form>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { getCity, addSettingApi } from '../../api/roomApi'
import querenQuxiao from '../../components/queren_quxiao.vue'
import peitaofwDialog from '../../components/peitaofwDialog.vue'
import maps from '../../components/map/map.vue'
export default {
  components: {
    querenQuxiao, peitaofwDialog, maps
  },
  async created() {
    let res = await getCity()
    this.all = { ...res.results }
    this.province = [...Object.keys(res.results)]
  },
  data() {
    return {
      dataform: {
        hotel: '',
        phone: '',
        text: '',
        address: '',
        rule: '',
        help: '',
        tags: ['舒适', '森林院子'],
        province: '',
        city: '',
        county: '',
        zuobiao: ''
      },
      province: [],
      city: [],
      county: [],
      all: {},
      dialogVisible: false,
      inputVisible: false,
      inputValue: '',
      rules: {
        hotel: [
          {
            required: true,
            message: '请输入酒店名称',
            trigger: 'blur'
          },
          {
            pattern: /^[\u4E00-\u9FA5]+$/,
            message: '请输入中文酒店名称',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          },
          {
            pattern: /^\d+$/,
            message: '请输入数值型电话号',
            trigger: 'blur'
          }
        ],
        text: [
          {
            required: true,
            message: '请输入酒店介绍',
            trigger: 'blur'
          }
        ],
        address: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ],
        rule: [
          {
            required: true,
            message: '请输入酒店政策',
            trigger: 'blur'
          }],
        help: [
          {
            required: true,
            message: '请输入交通指引',
            trigger: 'blur'
          }],
        tags: [
          {
            required: true,
            message: '请添加酒店标签',
            trigger: 'blur'
          }],
        county: [
          {
            required: true,
            message: '请将地区填写完整',
            trigger: 'blur'
          }
        ]
      },
    }
  },
  methods: {
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dataform.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    submitHandler() {
      this.$refs.dataform.validate(async (allRight) => {
        if (allRight) {
          let res = await addSettingApi(this.dataform)
          if (res.ok == 1) {
            this.showTable = true
            ElMessage({
              type: 'success',
              message: '保存成功'
            })
            this.dataform = {
              hotel: '',
              phone: '',
              text: '',
              address: '',
              rule: '',
              help: '',
              tags: ['舒适', '森林院子'],
              province: '',
              city: '',
              county: '',
              zuobiao: ''
            }
          } else {
            ElMessage({
              type: 'error',
              message: '保存失败'
            })
          }
        }
      })
    },
    cancelHandler() {
      this.showTable = true
    },
    changeUpload(file) {
      if (file.response) {
        this.houseForm.pic = file.response.data.path
      }
    },
    addfwHandler() {
      this.dialogVisible = true;
    },
    dialogOKHandler({ arr }) {
      this.dialogVisible = false;
      this.houseForm.peitaofw = [...arr]
    },
    dialogCancelHandler() {
      this.dialogVisible = false;
    },
    handleClose(tag) {
      this.dataform.tags.splice(this.dataform.tags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dataform.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    jieshouHandler({ form }) {
      this.dataform.zuobiao = '东经：' + form.lng + '   北纬：' + form.lat
    }
  },
  watch: {
    dataform: {
      deep: true,
      handler() {
        if (this.dataform.province) {
          this.city = [...Object.keys(this.all[this.dataform.province])]
        }
        if (this.dataform.city) {
          this.county = [...this.all[this.dataform.province][this.dataform.city]]
        }
      }
    }
  }
}
</script>
  
<style lang="scss" scoped>
.addHouse {
  width: inherit;
  background-color: #FFF;
  padding-bottom: 60px;

  .title {
    width: 180px;
    height: 21px;
    line-height: 46px;
    text-align: center;
    font-weight: 600;
  }
}

.tishi {
  width: 464px;
  font-size: 12px;
  margin-top: -17px;
  margin-left: 300px;
  color: #999999;
  text-align: right;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}</style>